﻿<!--
 Copyright © 2013 Nokia Corporation. All rights reserved.
 Nokia and Nokia Connecting People are registered trademarks of Nokia Corporation. 
 Other product and company names mentioned herein may be trademarks
 or trade names of their respective owners. 
 See LICENSE.TXT for license information.
-->

<UserControl x:Class="MusicExplorer.FlipableItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="clr-namespace:MusicExplorer"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="800" d:DesignWidth="480"
    x:Name="FlipControl" Margin="2,0,-2,0"
    toolkit:TiltEffect.IsTiltEnabled="True">

    <UserControl.Resources>
        <Storyboard x:Name="FlipFrontToBackSB" Duration="00:00:0.500">
            <!-- First rotate the Front 90 degrees -->
            <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="FrontSide"
                        Storyboard.TargetProperty="(UIElement.Projection).(RotationY)"
                        From="0" To="90" Duration="00:00:00.250" />
            
            <!-- Then hide the Front and show the Back-->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UiElement.Visibility)"
                                    Storyboard.TargetName="FrontSide">
                <DiscreteObjectKeyFrame KeyTime="00:00:00.250">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UiElement.Visibility)"
                                    Storyboard.TargetName="BackSide">
                <DiscreteObjectKeyFrame KeyTime="00:00:00.250">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            
            <!-- Then rotate the Back -->
            <DoubleAnimation BeginTime="00:00:00.250" Storyboard.TargetName="BackSide"
                        Storyboard.TargetProperty="(UIElement.Projection).(RotationY)"
                        From="270" To="360" Duration="00:00:00.250" />
        </Storyboard>
        
        <Storyboard x:Name="FlipBackToFrontSB" Duration="00:00:0.500">
            <!-- First rotate the Back 90 degrees -->
            <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="BackSide"
                        Storyboard.TargetProperty="(UIElement.Projection).(RotationY)"
                        From="360" To="270" Duration="00:00:00.250" />

            <!-- Then hide the Back and show the Front-->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UiElement.Visibility)"
                                    Storyboard.TargetName="BackSide">
                <DiscreteObjectKeyFrame KeyTime="00:00:00.250">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UiElement.Visibility)"
                                    Storyboard.TargetName="FrontSide">
                <DiscreteObjectKeyFrame KeyTime="00:00:00.250">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>

            <!-- Then rotate the Front -->
            <DoubleAnimation BeginTime="00:00:00.250" Storyboard.TargetName="FrontSide"
                        Storyboard.TargetProperty="(UIElement.Projection).(RotationY)"
                        From="90" To="0" Duration="00:00:00.250" />
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid x:Name="FrontSide" Visibility="Collapsed">
            <Grid.Projection>
                <PlaneProjection RotationY="0" />
            </Grid.Projection>

            <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Background="#55000000">
                <StackPanel Margin="4,4,4,4" Orientation="Vertical"  Width="{Binding ElementName=FlipControl, Path=ItemWidth}">
                    <TextBlock TextWrapping="Wrap" Text="{Binding ElementName=FlipControl, Path=FrontPrimaryText}" Margin="10,0" Style="{StaticResource PhoneTextLargeStyle}" FontSize="{StaticResource PhoneFontSizeMedium}" />
                    <StackPanel Margin="0,0,0,0" Orientation="Horizontal">
                        <TextBlock TextWrapping="Wrap" Text="{Binding ElementName=FlipControl, Path=FrontSecondaryText}" Style="{StaticResource PhoneTextSubtleStyle}" FontSize="{StaticResource PhoneFontSizeSmall}" />
                        <TextBlock x:Name="TrackTextBlock" Margin="-6,0,0,0" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" FontSize="{StaticResource PhoneFontSizeSmall}" Loaded="OnLoaded" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </Grid>

        <Grid x:Name="BackSide" Visibility="Collapsed">
            <Grid.Projection>
                <PlaneProjection RotationY="270" />
            </Grid.Projection>

            <Rectangle Margin="12,2,0,4" Fill="Black">
            </Rectangle>
            <Image Margin="12,2,0,4" HorizontalAlignment="Center" Source="{Binding ElementName=FlipControl, Path=BackImage}"/>
        </Grid>

        <Grid x:Name="Title" Visibility="Collapsed">
            <TextBlock Margin="12,0,0,23" Text="favourites" Style="{StaticResource PanoramaItemHeaderTextStyle}"/>
        </Grid>

    </Grid>

</UserControl>
